<template>
  <div>
    <div>
      <input
        type="text"
        placeholder="   回车搜索商品"
        v-model="value"
        @keyup.enter="onSubmit"
      />
    </div>
    <div class="left">
      <ul>
        <li @click="alltype" class="">
          所有分类
        </li>
        <li
          v-for="(item, index) in list"
          :key="index"
          v-show="item.pid == 0"
          @click="chengetab(item.type)"
          :class="{ red: changeRed == index }"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="jg">
      <div class="jgs">
        <swipers>轮播图</swipers>
      </div>
      <div class="content">
        <ul>
          <li v-for="(item, index) in order" :key="index">
            <img :src="item.icon" alt="" />
            <p>{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getShop } from "../../utils/api";
import swipers from "../Typeof/swipers";
export default {
  components: { swipers },
  data() {
    return {
      list: [],
      order: [],
      value: "",
      changeRed: 0,
    };
  },
  mounted() {
    getShop().then((res) => {
      this.list = res.data;
    });
    this.alltype();
  },
  methods: {
    //回车事搜索件
    onSubmit() {
      getShop().then((res) => {
        if (this.value == "undefained") {
          this.order = res.data.filter((item) => {
            return item.name.includes(this.value);
          });
        } else {
          this.order = res.data.filter((item) => {
            return item.name.includes(this.value);
          });
        }
      });
    },
    reds: function(index) {
      this.changeRed = index;
    },
    alltype() {
      getShop().then((res) => {
        this.order = res.data;
      });
    },
    chengetab(val) {
      getShop().then((res) => {
        this.order = res.data.filter((item) => {
          return item.type.includes(val);
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.jg {
  width: 5.5rem;
  height: 14rem;
  overflow: auto;
  float: right;
  .jgs {
    width: 100%;
    height: 25%;
    background: gold;
  }
}
.inp {
  text-align: center;
  height: 1rem;
  width: 100%;
  border-bottom: 1px solid #cccccc;
}
input {
  width: 5rem;
  height: 0.5rem;
  border-radius: 0.3rem;
  outline: none;
  background: #eee;
  border: 1px solid #cccccc;
  margin-top: 0.2rem;
}
.left {
  width: 2rem;
  height: 13.6rem;
  position: fixed;
  left: 0;
  font-size: 0.35rem;
  border-right: 1px solid #cccccc;
  ul {
    text-align: center;
    align-items: center;
    line-height: 1rem;
    li {
      height: 1rem;
    }
  }
  .red {
    border-left: 1px solid red;
  }
}
.content {
  width: 100%;
  ul {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    text-align: center;
    li {
      height: 2rem;
      img {
        width: 1.5rem;
        height: 1.5rem;
      }
    }
  }
}
</style>
